<template>
<!-- 排行榜里的每一个榜单 -->
  <li class="list_item" 
    @click="clickHandler(item.id)"
    :style="{ backgroundColor: bgcolor[color_order], color: color[color_order] } 
    ">
    <div class="left">
      <div>{{ item.name }}</div>
      <div class="picture_box">
          <div class="img_box" v-for="pic in pic" :key="pic.id">
            <img  :src="pic.al.picUrl | imageView(246)" >
          </div>
      </div>
    </div>
    <ul class="right">
      <div class="new">
          {{ item.updateFrequency }}
        </div>
      <li v-for="(song, index) in item.tracks" :key="index">
        {{index+1}}.{{ song.first }} - {{ song.second }}
      </li>
    </ul>
  </li>
</template>

<script>
import _ from 'underscore'
export default {
  props: {
    item: Object,
    color_order: Number,
  },
  data: function(){
      return{
          pic: [],
          bgcolor: ["#f3e1e7","#e0eae9","#f2e0e0","#e2e6ef"],
          color: ["#e8357a","#24998b","#e42322","#3771c2"],
      }
  },
  created: function(){
      this.axios
        .get('https://apis.netstart.cn/music/playlist/detail?id='+this.item.id)
        .then( res => {
            this.pic =  _.first(res.data.playlist.tracks, 3);
        })
  },
  methods: {
    clickHandler(id){
      this.$router.push({ path: '/listItemList', query: { id }})
    }
  }
};
</script>

<style lang="less" scoped>

.list_item {
    display: flex;
    height: 110px;
    border-radius: 10px;
    background-color: pink;
    margin: 5px 0;
    padding: 5px ;
  .left {
    width: 100px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    margin-top: 5px;
    .picture_box {
        margin-top: 5px;
        position: relative;
      .img_box{
        display: inline-block;
        position: absolute;
        bottom: 0;
        right: 0;
        z-index: 3;
        border-radius: 10px;
        background-color: #c4bebed4;
        &:first-child {
          position: relative;
          width: 60px;
          height: 60px;
        }
        &:nth-child(2) {
          width: 50px;
          height: 50px;
          right: 10px;
          z-index: 2;
          opacity: 0.8;
          filter: grayscale(0.8) brightness(1.1);
        }
        &:nth-child(3) {
          width: 40px;
          height: 40px;
          z-index: 1;
          opacity: 0.6;
          filter: grayscale(0.7) brightness(1.2);
        }
      }
      img {
        // display: block;
        vertical-align: middle;
        border-radius: 10px;
      }
    }
  }
  .right {
    color: black;
      flex: 1;
      padding-left: 10px;
    li {
      font-size: 13px;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
      height: 25px;
      line-height: 25px;
    }
    .new {
      color: #92878b;
      font-size: 10px;
      text-align: right;
      height: 20px;
    }
  }
}
</style>